import React, { useState } from 'react';
import { useRootStore } from "@/store/index.jsx"
import { observer } from 'mobx-react'


const CounterAction = observer(()=> {

  const { counter, user } = useRootStore();

  // 定义增加、减少和重置计数的函数
  const increment = () => {
    counter.increment();
  };

  const decrement = () => {
   counter.decrement();
  };

  const reset = () => {
    counter.reset();
  };

  const updateUserName = () => {
    // 这里可以添加更新用户名的逻辑
    user.updateUserName('李四')
  };

  const [loading, setLoading ] = useState( false );
  const asyncUpdateUserInfo = async() => {
    // 这里可以添加更新用户名的逻辑
    setLoading(true)
    await user.asyncUpdateUserInfo('王启年')
    setLoading(false)
    
  };

  return (
    <>
      <div>
        <button onClick={increment}>+</button>
        <button onClick={decrement}>-</button>
        <button onClick={reset}>Reset</button>
      </div>
      <div style={{ marginTop: '20px' }}>
        <button onClick={updateUserName}>修改用户名</button>
      </div>
      <div style={{ marginTop: '20px' }}>
        <button onClick={asyncUpdateUserInfo}>{loading?'请稍等~':'异步修改姓名'}</button>
      </div>
    </>
  );
});

export default CounterAction;